// 整体背景色
html {
    background-color: #EFEFF4;
}

// 头部
.head {
    height: 1.1733rem;
    background-color: #5485A2;
    position: relative;

    embed {
        position: absolute;
        width: .58rem;
        left: .2667rem;
    }

    p {
        font-size: 0.49rem;
        font-weight: 500;
        color: #FFFFFF;
    }
}

// 2  轮播图
section {
    position: relative;

    .lb {
        border-bottom: solid .0133rem #EFEFF4;

        .lunbo {
            overflow: hidden;

            ul {
                width: 300%;

                li {
                    img {
                        width: 10rem;
                        height: 7.2rem;
                        ;
                    }
                }
            }

        }

        .dian {
            position: absolute;
            bottom: .1867rem;
            left: 42%;

            .yuan {
                margin-top: .4rem;

                .on {
                    background: #999;
                    opacity: 0.8;
                }

                li {
                    width: 0.21rem;
                    height: 0.21rem;
                    background: #999;
                    margin: 0 .04rem;
                    opacity: 0.3;
                    border-radius: 50%;
                }

            }
        }
    }
}

// 3
.three {
    background-color: #ffffff;
    height: 1.7333rem;
    padding: .4rem 0;
    border-bottom: solid .0133rem #EFEFF4;

    .three-1 {
        font-size: 0.4rem;
        font-weight: 500;
        color: #444444;
        padding: 0 .4rem;
        margin-bottom: .1367rem;

        img {
            width: 0.67rem;
            height: 0.4rem;
            margin-right: .1067rem;
        }
    }

    .three-2 {
        padding: 0 .3467rem;

        .three-2-1 {
            font-size: 0.48rem;
            font-weight: bold;
            color: #000000;
            margin-right: .1767rem;
        }

        .three-2-2 {
            font-size: 0.32rem;
            font-weight: 500;
            text-decoration: line-through;
            color: #AAAAAA;
        }

        .three-2-3 {
            font-size: 0.24rem;
            font-weight: 500;
            color: #AAAAAA;
        }
    }
}

// 4
.four {
    width: 10rem;
    height: 1.17rem;
    background: #FFFFFF;
    padding: 0.41rem 0.44rem;

    .four-1 {
        font-size: 0.4rem;
        font-weight: 500;
        color: #000000;
    }

    .four-2 {
        font-size: 0.4rem;
        font-weight: 500;
        color: #B2B2B2;

        img {
            margin-left: 0.27rem;
            width: 0.21rem;
            height: 0.33rem;
        }
    }
}

// 5
.two {
    background-color: #fff;
    border-top: solid .0133rem #E5E5E5;
    border-bottom: solid .0133rem #E5E5E5;
    color: #444444;
    margin-bottom: .3333rem;

    .two-you {
        border-right: solid .0133rem #E5E5E5;
    }

    .two-ul {
        font-size: 0.4rem;
        height: 1.17rem;
        line-height: 1.17rem;

        li {
            width: 33.3333333%;
            text-align: center;
        }
    }

    embed {
        width: .3333rem;
    }
}

// 6
.six {
    img {
        width: 10rem;
        height: 4.55rem;
    }
}


//购物
.gou {
    width: 100%;
    height: 8rem;
    background: #FFFFFF;
    position: fixed;
    bottom: -0.0133rem;
    left: -0.0133rem;
    z-index: 5;

    .gou-1 {
        padding: .4rem;
        border-bottom: solid 1px #DDDDDD;
        position: relative;
        .gb {
            position: absolute;
            width: 0.49rem;
            height: 0.49rem;
            right: .4rem;
        }

        .gou-1-p {
            padding-top: .1667rem;
            margin-left: 0.45rem;

            p:first-child {
                font-size: 0.45rem;
                font-weight: 500;
                color: #444444;
                margin-top: .0667rem;
                margin-bottom: .3033rem;
            }

            p:last-child {
                font-size: 0.64rem;
                font-weight: 500;
                color: #000000;
            }

        }

        img {
            width: 1.87rem;
        }
    }

    // <!-- 商品类型 -->
    .gou-4,
    .gou-3,
    .gou-2 {
        padding: 0 0.4rem;
        margin-top: .7rem;

        p {
            font-size: 0.4rem;
            font-weight: 500;
            color: #AAAAAA;
        }

        span:first-child {
            background: rgba(186, 224, 243, 0.3);
            border: 0.01px solid #92C7E2;
        }


        span:last-child {
            background: rgba(226, 87, 76, 0);
            border: 0.01px solid #DDDDDD;
        }

        span {
            margin-left: 0.13rem;
            padding: 0.14rem 0.27rem;
        }
    }

    // <!-- 商品数量 -->
    .gou-3 {
        .gou-3-1 {
            div {
                font-size: 0.32rem;
                width: 0.59rem;
                height: 0.59rem;
                text-align: center;
                line-height: 0.59rem;
                border: 0.01px solid #DDDDDD;
            }
        }
    }

    // <!-- 商品颜色 -->
    .gou-4 {
        ul {
            li {
                width: 0.53rem;
                height: 0.53rem;
                border-radius: 50%;
                margin-left: 0.23rem;
            }
        }
    }


    .ok {
        position: fixed;
        width: 100%;
        bottom: -0.0133rem;
        left: -0.0133rem;
        height: 1.17rem;
        line-height: 1.17rem;
        letter-spacing: .0667rem;
        font-size: 0.48rem;
        font-weight: 500;
        color: #FFFFFF;
        background: #5293BA;
        text-align: center;
    }
}

// 灯罩效果
.light {
    width: 10rem;
    height: 100%;
    background: #000000;
    opacity: 0.5;
    position: absolute;
    top: 0;
}


// 底部
.dibu {
    width: 100%;
    height: 1.31rem;
    position: fixed;
    background-color: #fff;
    bottom: -0.0133rem;
    left: -0.0133rem;
    border-top: solid 1px #DDDDDD;

    .dibu-1 {
        width: 33%;
        height: 1.31rem;
        background: #161F24;

        ul {
            .dibu-li {
                margin-right: .88rem;
            }

            li {
                text-align: center;
                font-size: 0.27rem;
                color: #FFFFFF;
                opacity: 0.5;
            }
        }
    }

    .dibu-2 {
        width: 67%;
        height: 1.31rem;
        font-size: 0.4rem;
        color: #FFFFFF;
        text-align: center;
        line-height: 1.31rem;

        .dibu-2-ul-1 {
            width: 50%;
            height: 1.31rem;
            background: #365C72;
        }

        .dibu-2-ul-2 {
            width: 50%;
            height: 1.31rem;
            background: #5293BA;
        }
    }
}

// 购物车
.shopping {
    position: fixed;
    bottom: 2rem;
    left: 8.4533rem;

    span {
        position: absolute;
        left: .8233rem;
        width: 0.45rem;
        height: 0.45rem;
        background: #F53F50;
        border-radius: 50%;
        text-align: center;
        line-height: 0.45rem;
        font-size: 0.27rem;
        color: #FFFFFF;
    }

    img {
        width: 1.17rem;
        height: 1.17rem;
        box-shadow: 0rem 0rem 0rem 0rem rgba(87, 138, 169, 0.2);
        border-radius: 50%;
    }
}